<template>
  <div class="infoM" v-cloak v-if="Object.keys(goodsInfoList).length!=0">
    
    
    <!-- v-if=" Array.from(goodsInfoList).length" -->
    <!-- v-if="Object.Keys(goodsInfoList)!=0" -->
    <div>
      <div class="left_icon" :style="{'background-color':(scroll<400?'rgba(0,0,0,0.5)':scroll<1000?'white':scroll<pingjiascroll?'rgba(255,255,255,0)':'white'),
                                      'color':(scroll<400?'rgba(255,255,255,1)':scroll<1000?'black':scroll<pingjiascroll?'rgba(0,0,0,1)':'black'),
                                      'width':(scroll<400?'100px':scroll<1000?'50px':scroll<pingjiascroll?'50px':'50px')}">
        <van-icon name="arrow-left" size='20' @click="backto"/>
      </div>
      <div class="right_icon" :style="{'background-color':(scroll<400?'rgba(0,0,0,0)':scroll<1000?'white':scroll<pingjiascroll?'rgba(255,255,255,0)':'white')}">
        · · ·
      </div>
    </div>
    

    <div class="back" ref="back" :style="{'background-color':'white','opacity':(scroll<400?0.0:scroll<1000?1:scroll<pingjiascroll?0.8:1)}">
      <div class="info_head">
        <div class="nav" :class="navname==item.name?'active':''" v-for="(item,index) in navlist" :key="index" @click="navchange(item)">{{item.name}}</div>
        <!-- <div class="nav active">
          商品
        </div>
        <div class="nav">
          评价
        </div>
        <div class="nav">
          详情
        </div>
        <div class="nav">
          推荐
        </div> -->
      </div>
    </div>
    
    <div class="head" ref="shangpin">
      <!-- 轮播图 -->
      <div class="info_swipe">
        <van-swipe autoplay="3000" duration="500" @change="onChange">
          <van-swipe-item v-for="(item,index) in goodsInfoList.image" :key="index">
            <img :src="item" alt />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/{{goodsInfoList.image.length}}</div>
          </template>
        </van-swipe>
      </div>
      <!-- 价格 -->
      <div class="infoPrice">
        <div class="pri">
          <span class="renminbi">￥</span>
          <span class="price">{{goodsInfoList.price}}</span>
          <span class="old_renminbi">￥</span>
          <span class="old_price">{{goodsInfoList.old_price}}</span>
        </div>
        <div class="icon" >
          <div class="oo">
            <van-icon v-if="!ischose" name="bill-o" size="30" color="#07c160" @click="ischose = !ischose"/>
            <van-icon v-if="ischose" name="bill" size="30" color="#07c160" @click="ischose = !ischose"/>
            <p>降价提醒</p>
          </div>
          <div class="shou" >
            <van-icon v-if="!iscollection" name="like-o" size="30" color="#f20" @click="iscollection = !iscollection"/>
            <van-icon v-if="iscollection" name="like" size="30" color="#f20" @click="iscollection = !iscollection"/>
            <p>收藏</p>
          </div>
        </div>
      </div>
      <!-- 商品名称 -->
      <div class="goodsName">
        <span class="span">自营</span>
        <span class="names">{{goodsInfoList.goods_name}}</span>
      </div>
    </div>
    <!-- 中间 -->
    <div class="middle">
      <div class="toJD">
        <div class="JDicon">
          <van-icon name="gift-card" color="#f20" size="30"/>
          <!-- <p>GIFT</p> -->
          <div class="JDmsg">
          进入京东购物小程序每天领取10京豆
          </div>
        </div>
        
        <div class="checkout">
          立即查看
        </div>
      </div>
    </div>
    <!-- 店铺信息 -->
    <shopinfo :storeinfo = "goodsInfoList.storeInfo"></shopinfo>
    <!-- 渲染大图 -->
    <!-- <div ></div> -->
    <div class="xiangqing" ref="xiangqing">
      <goodsdetail :goodsdetaillist = "goodsInfoList.detail.in_detail">
        
        <template #head>
          <div class="info">
            商 品 详 情
          </div>
        </template>
      </goodsdetail>
    </div>
    <!-- <div  class="detail" >
      <div v-html="goodsInfoList.detail.in_detail"></div>
    </div> -->
    <!-- 商品评价 -->
    <div ref="pingjia">
      <evaluate :gid="goodsInfoList.goods_id" @send-data='getdata'></evaluate>
    </div>
    <div ref="tuijian">
      <!-- 推荐 -->
      <recommend></recommend>
    </div>
  </div>
</template>

<script>
import recommend from "../../components/commom/recommend"
import { getGoodsInfo } from "../../api/info";
import goodsdetail from "./component/goods_detail"
import shopinfo from "./component/shop_detail"
import {scrollAnimation} from '../../utils/tools'
import evaluate from './component/appraisal'
import { Toast } from 'vant';
export default {
  name: "info",
  data() {
    return {
      goodid: "",
      goodsInfoList: {},
      iscollection:false,
      ischose:false,
      current:0,
      scroll:0,
      pingjiascroll:0,
      navname:"商品",
      navlist:[
        {name:"商品"},
        {name:"详情"},
        {name:"评价"},
        {name:"推荐"},
      ],
      failmsg:'',
      isfail:true
    };
  },
  components:{
    shopinfo,
    goodsdetail,
    evaluate,
    recommend
  },
  beforeCreate() {
    
  },
  created() {
    this.$nextTick(()=>{
      this.getGoodId();
      getGoodsInfo({ gid: this.goodid,uid:localStorage.uid}).then(res => {
        console.log("商品详情数据", res);
        this.goodsInfoList = res.result.data;
        this.$store.dispatch('cartStore/getGoodsInfo',{
            user_id: localStorage.uid,
            shop_id: res.result.data.storeInfo.store_id,
            goods_id: res.result.data.goods_id,
            sku_id: res.result.data.recommend[0].sku_id,
            goods_num: 1,
            active_type: res.result.data.active_type,
      })
      });

    })
  },
  beforeMount() {
    
  },
  mounted() {
    this.$nextTick(()=>{
      // 添加页面滚动监听方法
      window.addEventListener("scroll", this.handleScroll);
      
      // window.addEventListener 是一个全局方法  不使用时 应移除
      this.handleScroll()
      // 获取商品信息 以供添加购物车
      this.$store.dispatch('cartStore/getGoodsInfo',{
            user_id: localStorage.uid,
            shop_id: this.goodsInfoList.shop_id,
            goods_id: this.goodsInfoList.goods_id,
            sku_id: this.goodsInfoList.sku_id,
            goods_num: 1,
            active_type: this.goodsInfoList.active_type,
      })
    })
    setTimeout(() => {
      // todo
      window.addEventListener("scroll", this.handleScroll);
    this.handleScroll()
    }, 0)
  },
  beforeDestroy() {
    // 组件销毁前移除监听方法
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    getdata(a){
      // console.log(a)
      this.failmsg = a
    },
    handleScroll(){
        let scrollTop = document.documentElement.scrollTop
        if(scrollTop>0&&scrollTop<this.$refs.shangpin.offsetTop+this.$refs.shangpin.offsetHeight){
          this.navname =  "商品"
        }else if(scrollTop>this.$refs.xiangqing.offsetTop-100&&scrollTop<this.$refs.xiangqing.offsetTop+this.$refs.xiangqing.offsetHeight-100){
          // console.log(12)
          this.navname = '详情'
        }else if(scrollTop>this.$refs.pingjia.offsetTop-200&&scrollTop<this.$refs.pingjia.offsetTop+this.$refs.pingjia.offsetHeight){
          if(this.failmsg&&this.isfail){
            Toast.fail(this.failmsg)
            // 通过这个变量让此方法只执行一次
            this.isfail = false
          }
          this.navname = "评价"
        }else if(scrollTop>this.$refs.pingjia.offsetTop+this.$refs.pingjia.offsetHeight-30){
          this.navname = "推荐"
        }
        this.scroll = scrollTop
        this.pingjiascroll = this.$refs.pingjia.offsetTop
        // console.log(scrollTop)
    },
    navchange(i){
      this.navname = i.name
      if(i.name=="商品"){
        scrollAnimation((document.documentElement.scrollTop || document.body.scrollTop),this.$refs.shangpin.offsetTop-55)
      }
      if(i.name=="评价"){
        scrollAnimation((document.documentElement.scrollTop || document.body.scrollTop),this.$refs.pingjia.offsetTop-55)
      }
      if(i.name=="详情"){
        scrollAnimation((document.documentElement.scrollTop || document.body.scrollTop),this.$refs.xiangqing.offsetTop-55)
      }
      if(i.name=="推荐"){
        scrollAnimation((document.documentElement.scrollTop || document.body.scrollTop),this.$refs.tuijian.offsetTop-55)
      }
    },
    getGoodId() {
      console.log(11, this.$route.params);
      this.goodid = this.$route.params.goodid;
    },
    backto() {
    this.$router.go(-1)
    },
    onChange(index) {
      this.current = index;
    },
  },
  
};
</script>

<style lang="less" scoped>
[v-cloak]{
            display: none;
        }
        .xiangqing{
          width: 100%;
          
        }
.infoM {
  background-color: #f7f7f7;
  padding-bottom: 150px;
  // position: relative;
  .left_icon{
    margin-top: 5px;
    margin-left: 10px;
      height: 85px;
      line-height: 110px;
      // width: 90px;
      opacity: 1 !important;
      position: fixed;
      transition: all 0.1s linear;
      left: 0;
      top: 0;
      z-index: 9999;
      // background-color: #eee;
      border-top-left-radius: 50px;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      border-top-right-radius: 20px;
    }
  .right_icon{
    margin-top: 4px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    width: 50px;
    position: fixed;
    transition: all 0.5s linear;
    z-index: 9999;
    right: 0;
    top: 0;
    // background-color: #eee;
    opacity: 1 !important;
    font-weight: bolder;
    font-size: 20px;
  }
  .back{
    position: fixed;
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 60px;
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    top: 0;
    left: 0;
    // background-color: rgba(0, 0, 0, 0.05);
    z-index: 999;
    display: flex;
    justify-content: space-between;
    background-color: white;
    box-sizing: border-box;
    border-bottom: 3px solid #555;
    transition: all 0.1s linear;
    
    
    
    .info_head{
      transition: all 0.1s linear;
      color: black;
      margin-left: 10%;
      width: 80%;
      display: flex;
      justify-content: space-around;
      .active{
        border-bottom: 3px solid #f20;
      }
      .nav{
        width: 24%;
        font-weight: bold;
        font-size: 20px;
      }
    }

  }
  .head{
    // margin-top: 100px;
    background-color: white;
    padding-bottom: 20px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    margin-bottom: 30px;
  }
  // .detail{
  //   width: 100% !important;
  //   div{
  //     width: 100% !important;
  //     p{
  //       width: 100% !important;
  //       img{
  //         width: 100% !important;
  //       }
  //     } 
  //   }
  // }
}
.info_swipe {
  width: 100%;
  height: 650px;
  .van-swipe {
    width: 100%;
    height: 650px;
     .custom-indicator {
      position: absolute;
      width: 90px;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.2);
      border-top-left-radius: 20px;
      border-bottom-left-radius: 10px;
    }
  }
  img {
    width: 100%;
    height: 650px;
  }
}
.infoPrice {
  box-sizing: border-box;
  padding: 2px 5px;
  width: 100%;
  height: 100px;
  // line-height: 100px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  .pri {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    .renminbi {
      font-size: 30px;
      color: #f20;
      font-weight: bolder;
      line-height: 120px;
    }
    .price {
      line-height: 100px;
      font-size: 60px;
      font-weight: bolder;
      color: #f20;
    }
    .old_renminbi{
      margin-left: 20px;
      font-size: 30px;
      color: #ccc;
      font-weight: bolder;
      line-height: 120px;
      text-decoration: line-through;
    }
    .old_price{
      line-height: 120px;
      font-size: 30px;
      font-weight: bolder;
      text-decoration: line-through;
      color: #ccc;
    }
  }
  .icon {
    width: 30%;
    display: flex;
    justify-content: space-around;
  }
}
.goodsName {
  box-sizing: border-box;
  padding: 5px 10px;
  width: 100%;
  text-align: left;
  .span {
    text-align: center;
    display: inline-block;
    margin-right: 20px;
    width: 60px;
    height: 40px;
    color: white;
    line-height: 40px;
    background-color: #f20;
    border-radius: 10px;
  }
  .names {
    max-height: 180px;
    font-size: 30px;
    line-height: 60px;
    font-weight: bolder;
  }
}
.middle{
  width: 100%;
  height: 100px;
  line-height: 100px;
  background-color: white;
  border-radius: 40px;
  .toJD{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    .JDicon{
      width: 70%;
      display: flex;
      justify-content: flex-start;
      .van-icon::before {
        line-height: 100px;
      }
      .JDmsg{
        color: #777;
      }
    }
    .checkout{
      margin-top: 25px;
      width: 120px;
      line-height: 30px;
      height: 30px;
      padding: 10px;
      background-color: #f20;
      color: white;
      border-radius: 30px;
    }
    
  }
}

</style>